<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Select 选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值</p>
	<el-select v-model="value" placeholder="请选择..." size="large" default-first-option filterable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>&nbsp;
	<el-select v-model="value0" placeholder="value">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>&nbsp;
	<el-select v-model="value" placeholder="请选择..." size="small">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>
	
	<el-divider content-position="left">有禁用选项</el-divider><!-- =============================================================== -->
	<p class="desc">在 el-option 中，设定 disabled 值为 true，即可禁用该选项</p>
	<el-select v-model="value" placeholder="Select">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">为 el-select 设置 disabled属性，则整个选择器不可用。</p>
	<el-select v-model="value" placeholder="Select" disabled>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>
	
	<el-divider content-position="left">可清空单选</el-divider><!-- =============================================================== -->
	<p class="desc">包含清空按钮，可将选择器清空为初始状态</p>
	<p class="desc">为 el-select 设置 clearable 属性，则可将选择器清空。 需要注意的是，clearable 属性仅适用于单选。</p>
	<el-select v-model="value" placeholder="Select" clearable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>
	
	<el-divider content-position="left">基础多选</el-divider><!-- =============================================================== -->
	<p class="desc">适用性较广的基础多选，用 Tag 展示已选项</p>
	<p class="desc">为 el-select 设置 multiple 属性即可启用多选， 此时 v-model 的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 的形式展现， 你也可以设置 collapse-tags 属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。</p>
	<span style="margin-left: 10px">默认：</span>
	<el-select v-model="value1" placeholder="Select" multiple filterable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
	
	<span style="margin-left: 10px">使用collapse-tags：</span>
	<el-select v-model="value2" placeholder="Select" multiple collapse-tags style="margin-left: 20px">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
	
	<span style="margin-left: 10px">使用collapse-tags-tooltip：【使用visible-change来检测下拉框出现/隐藏】</span>
	<el-select v-model="value2" placeholder="Select" @visible-change="visibleChange1" multiple collapse-tags collapse-tags-tooltip style="margin-left: 20px" filterable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
	
	<el-divider content-position="left">自定义模板</el-divider><!-- =============================================================== -->
	<p class="desc">你可以自定义单个选项怎么被渲染</p>
	<p class="desc">将自定义的 HTML 模板插入 el-option 的 slot 中即可。</p>
	<el-select v-model="value" placeholder="Select">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
			<span style="float: left">{{ item.label }}</span>
			<span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">{{ item.value }}</span>
		</el-option>
	</el-select>
	
	<el-divider content-position="left">将选项进行分组</el-divider><!-- =============================================================== -->
	<p class="desc">你可以为选项进行分组来区分不同的选项</p>
	<p class="desc">使用 el-option-group 对备选项进行分组，它的 label 属性为分组名</p>
	<el-select v-model="value" placeholder="Select" @change="handleChange">
		<el-option-group v-for="group in options2" :key="group.label" :label="group.label">
			<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
		</el-option-group>
	</el-select>
	
	<el-divider content-position="left">筛选选项</el-divider><!-- =============================================================== -->
	<p class="desc">可以利用筛选功能快速查找选项</p>
	<p class="desc">为 el-select 添加 filterable 属性即可启用筛选功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值</p>
	<el-select v-model="value" placeholder="Select" filterable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
	
	<el-divider content-position="left">远程搜索</el-divider><!-- =============================================================== -->
	<p class="desc">通过输入关键字在服务器上来搜索数据</p>
	<p class="desc">为了启用远程搜索，需要将 filterable 和remote 设置为 true，同时传入一个 remote-method。 remote-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。 需要注意的是，如果 el-option 是通过 v-for 指令渲染出来的，此时需要为 el-option 添加 key 属性， 且其值需具有唯一性，比如这个例子中的 item.value。</p>
	<el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入..." :remote-method="remoteMethod" :loading="loading">
		<el-option v-for="item in optionsTemp" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"/>
	</el-select>
	
	<el-divider content-position="left">创建新的选项</el-divider><!-- =============================================================== -->
	<p class="desc">可以创建并选中选项中不存在的条目</p>
	<p class="desc">通过使用 allow-create 属性，用户可以通过输入框创建新项目。 为了使 allow-create 正确的工作， filterable 的值必须为 true. 本例还使用了 default-first-option 属性， 在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。</p>
	<el-select v-model="value3" multiple filterable allow-create default-first-option placeholder="选择或创建一个Tag">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			loading: false,
			value0: "Option4",
			value: "",
			value1: [],
			value2: [],
			value3: [],
			optionsTemp: [],
			options: [
				{value: 'Option1', label: 'OptionA',},
				{value: 'Option2', label: 'OptionB', disabled: true,}, //有禁用的
				{value: 'Option3', label: 'OptionC',},
				{value: 'Option4', label: 'OptionD',},
				{value: 'Option5', label: 'OptionE',},
			],
			options2: [
				{
					label: '自治市',
					options: [
						{value: 'Shanghai', label: '上海',},
						{value: 'Beijing', label: '北京',},
					],
				},
				{
					label: '其他',
					options: [
						{value: 'Chengdu', label: '成都',},
						{value: 'Shenzhen', label: '深圳',},
						{value: 'Guangzhou', label: '广州',},
						{value: 'Dalian', label: '大连',},
					],
				},
			]
			
		}
	},
	methods:{
		handleChange(item){
			console.log(item)
		},
		remoteMethod(query){
			if (query) {
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.optionsTemp = this.options.filter((item) => {
						return item.label.toLowerCase().includes(query.toLowerCase());
					})
				}, 300)
			} else {
				this.optionsTemp = []
			}
		},
		showValue(){
			console.log(this.$data.options, this.$data.value3);
		},
		visibleChange1(visible){
			// visible为true是展开；为false是隐藏
			console.log(visible);
			if(visible){
				console.log("Select展开了");
			}else{
				console.log("Select隐藏了");
			}
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
